<template>
	<view class="login-container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="back-btn" @click="goBack">
				<image src="/static/icons/back.png" class="back-icon" />
			</view>
			<text class="nav-title">{{ loginType === 'pwd' ? '密码登录' : '验证码登录' }}</text>
		</view>

		<!-- 登录方式切换 -->
		<view class="login-type">
			<text :class="['type-item', { active: loginType === 'pwd' }]" @click="switchLoginType('pwd')">
				密码登录
			</text>
			<text :class="['type-item', { active: loginType === 'code' }]" @click="switchLoginType('code')">
				验证码登录
			</text>
		</view>

		<!-- 登录表单 -->
		<view class="form-box">
			<input v-model="phone" placeholder="请输入手机号" class="input-item" type="number" maxlength="11" />

			<!-- 动态输入区域 -->
			<view class="code-area" v-if="loginType === 'code'">
				<input v-model="code" placeholder="请输入验证码" class="input-item code-input" />
				<button class="get-code-btn" :disabled="countdown > 0" @click="getVerifyCode">
					{{ countdown > 0 ? `${countdown}s后获取` : '获取验证码' }}
				</button>
			</view>

			<input v-else v-model="password" placeholder="请输入密码" class="input-item" type="password" />

			<button class="login-btn" @click="handleLogin">
				{{ loginType === 'pwd' ? '立即登录' : '验证码登录' }}
			</button>

			<!-- 辅助功能 -->
			<view class="extra-links">
				<text @click="navTo('register')">立即注册</text>
				<text @click="navTo('forget')">忘记密码？</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginType: 'pwd', // 登录方式：pwd/code
				phone: '',
				password: '',
				code: '',
				countdown: 0 // 验证码倒计时
			}
		},
		methods: {
			// 切换登录方式
			switchLoginType(type) {
				this.loginType = type
				this.clearInputs()
			},

			// 清除输入内容
			clearInputs() {
				this.password = ''
				this.code = ''
			},

			// 手机号验证
			validatePhone() {
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 获取验证码
			async getVerifyCode() {
				if (!this.validatePhone()) return

				try {
					// 调用获取验证码接口
					const res = await uni.request({
						url: 'https://your-api-domain.com/sms/send', // 替换为实际API地址
						method: 'POST',
						data: {
							phone: this.phone,
							type: this.loginType === 'code' ? 'login' : 'reset' // 根据场景区分
						}
					})

					if (res.statusCode === 200) {
						// 开始倒计时
						this.countdown = 60
						const timer = setInterval(() => {
							this.countdown <= 0 ? clearInterval(timer) : this.countdown--
						}, 1000)
						uni.showToast({
							title: '验证码已发送'
						})
					} else {
						uni.showToast({
							title: res.data.message || '发送失败',
							icon: 'none'
						})
					}
				} catch (err) {
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				}
			},
			// 处理登录（对接API）
			async handleLogin() {
				if (!this.validatePhone()) return

				try {
					let apiPath = ''
					let requestData = {}

					if (this.loginType === 'pwd') {
						// 密码登录验证
						if (this.password.length < 6) {
							uni.showToast({
								title: '密码至少6位',
								icon: 'none'
							})
							return
						}
						apiPath = '/api/auth/login'
						requestData = {
							phone: this.phone,
							password: this.password
						}
					} else {
						// 验证码登录
						if (this.code.length !== 6) {
							uni.showToast({
								title: '请输入6位验证码',
								icon: 'none'
							})
							return
						}
						apiPath = '/api/auth/code-login'
						requestData = {
							phone: this.phone,
							code: this.code
						}
					}

					// 调用登录接口
					const res = await uni.request({
						url: `http://localhost:5000${apiPath}`,
						method: 'POST',
						data: requestData
					});

					if (res.statusCode === 200) {
						// 登录成功处理
						this.$store.commit('user/LOGIN_SUCCESS', {
							phone: res.data.phone,
							nickname: res.data.nickname,
							token: res.data.token // 保存token
						})

						uni.showToast({
							title: '登录成功'
						})
						setTimeout(() => uni.switchTab({
							url:'/pages/main/home/index'
						}), 1500)
					} else {
						uni.showToast({
							title: res.data.message || '密码错误，请检查密码是否正确',
							icon: 'none'
						})
					}
				} catch (err) {
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				}
			},
			// 跳转到其他页面
			navTo(page) {
				uni.navigateTo({
					url: `/pages/auth/${page}`
				})
			},
			
			// 返回上一页
			goBack() {
				uni.switchTab({
					url: '/pages/main/home/index'
				})
			}
		}
	}
</script>

<style scoped>
	/* 新增样式 */
	.login-type {
		display: flex;
		justify-content: center;
		margin: 40rpx 0;
	}

	.type-item {
		margin: 0 40rpx;
		font-size: 32rpx;
		color: #9BBFE0;
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid transparent;
	}

	.type-item.active {
		color: #9BBFE0;
		border-color: #9BBFE0;
	}

	.code-area {
		position: relative;
	}

	.code-input {
		padding-right: 240rpx;
	}

	.get-code-btn {
		position: absolute;
		right: 0;
		top: 0;
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #CCE1F2;
		color: #fff;
		border-radius: 0 50rpx 50rpx 0;
		font-size: 28rpx;
	}

	.extra-links {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		color: #9BBFE0;
		font-size: 28rpx;
	}

	.extra-links text {


		padding: 20rpx;
	}

	/* 使用scoped避免样式污染 */
	.login-container {
		background-color: #FDF5E7;
		height: 100vh;
	}

	.custom-nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-title {
		color: #9BBFE0;
		font-size: 36rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.form-box {
		padding: 60rpx 80rpx;
	}

	.input-item {
		height: 100rpx;
		background: white;
		margin-bottom: 40rpx;
		border-radius: 50rpx;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(155, 191, 224, 0.2);
	}

	.login-btn {
		height: 100rpx;
		line-height: 100rpx;
		color: white;
		border-radius: 50rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		letter-spacing: 4rpx;
	}
</style>